<template lang="html">
    <div id="sort" @load="show(), fix()">
        <div :id="item.id" v-for="item in allData.module" :style="'background:' + allData.page.bg_content">
            <!-- 不用跳转的图片 -->
            <img :src="item.value.imgurl" v-if="item.value.hasOwnProperty('imgurl') && item.value.imgurl != ''">


<!-- 横向滚动导航菜单 -->
            <nav v-if="item.value.hasOwnProperty('floors') && item.value.floors != ''" :class="flag2" ref="nav">
                <div :style="'width:' + item.value.floors.length*84/12 + 'rem;'">
                    <!-- :href="'#'+ item.id" -->
                    <a :href="'#'+nav.id" v-for="nav in item.value.floors" v-text="nav.title"></a>
                </div>
            </nav>

<!-- 中间的小标题 不用跳转 -->
            <div class="titleText" v-if="item.value.hasOwnProperty('text') && item.value.text != ''">
                <img src="./images/titleLeft.png" alt="">
                <span v-text="item.value.text"></span>
                <img src="./images/titleRight.png" alt="">
            </div>

            <!-- 需要跳转 -->
            <div :id="item.id" class="pro" v-for="bigimg in item.value.nhotzone" style="position: relative">
                <img :src="bigimg.url">
<!-- 图片是两个或者三个产品，要在上面定位几个a做到跳转效果 -->
                <div class="coverDiv" v-if="bigimg.hasOwnProperty('area') && bigimg.area != ''" style="height: 99%;">
                    <router-link class="coverA" v-for="product in bigimg.area" :to="'/details/' + product.id" :key="product.id" :style="'width:'+ bigimg.width/bigimg.area.length/2.4/12 +'rem;'"></router-link>
                </div>
            </div>


            <ul v-if="item.hasOwnProperty('product_list') && item.product_list != ''">
<!-- 每个Li都需要跳转 -->
                <li :id="item.id" v-for="goods in item.product_list" style="position: relative;">
                    <img :src="goods.image_urls_head" alt="">
                    <h5 v-text="goods.product_promotion_title"></h5>
                    <p>
                        <em v-text="'￥'+ goods.minprice"></em>
                        <span v-text="'原价:￥'+goods.price"></span></p>
                    <h4>立即购买</h4>
<!-- 图片是两个或者三个产品，要在上面定位几个a做到跳转效果 -->
                    <div class="coverDiv" style="height: 99%;">
                        <router-link class="coverA" :to="'/details/' + goods.product_id"></router-link>
                    </div>
                </li>
            </ul>
        </div>

<!-- 已经到底了 -->
        <p class="btm">
            亲，已经到底了呦~
        </p>


<!-- 返回顶部 -->
        <div class="top" onclick="window.scrollTo(0,0)" v-if="flag1">
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            allData: [],
            id: this.$route.params.id,
            flag1: false,
            flag2: '',
            scroll: '',
            a: ''
        }
    },
    methods: {
        show() {
            if (document.body.scrollTop > 2000) {
                this.flag1 = true;
            } else {
                this.flag1 = false;
            }
            return this.flag1;
        },
        toTop () {
              window.scrollTo(0,0);
        },
        dis () {
            //   console.log(this.$refs.nav);
              this.a = this.$refs.nav[0].offsetTop;
              return this.a;
        },
        fix () {
            //   console.log(this.$refs.nav[0].offsetTop);
              if (document.body.scrollTop >= this.a) {
                  this.flag2 = 'fix';
              } else {
                  this.flag2 = ''
              }
              return this.flag2;
        }
    },
    mounted() {
      window.addEventListener('scroll', this.show);
      window.addEventListener('scroll', this.fix);
      window.addEventListener('load', this.dis);
    },
    created () {
        this.$http.get('../../static/home/sort/' + this.id + '.json').then( data => {
            // console.log(data.data.page.bg_content);
            this.allData = data.data;
        }, err => {
            console.log(err);
        });
        this.toTop();
    }
}
</script>

<style lang="css" scoped>
    img{
        width: 100%;
    }
    #sort{
        background: #fff;
        position: relative;
        z-index: 11;
        overflow-x: hidden;
    }
    #sort div:after{
        content: '';
        height: 0;
        clear: both;
        display: block;
    }
    nav{
        width: 100%;
        height: 3.33rem;
        overflow-x: scroll;
        border: 1px solid #E5E5E6;
        background-color: #fff !important;
    }
    nav > div{
        height: 3.33rem;
        line-height: 3.33rem;
    }
    nav > div a{
        float: left;
        width: 5.33rem;
        height: 3.24rem;
        padding: 0 10px;
        text-align: center;
    }
    /*nav > div a:first-of-type{
        color: #ff2559;
        border-bottom: 1px solid #ff2559;
    }*/
    nav > div a:hover{
        color: #ff2559;
        border-bottom: 1px solid #ff2559;
    }
    .fix{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
    }
    .titleText{
        width: 100%;
        height: 1.83rem;
        line-height: 1.83rem;
        padding-top: 5px;
    }
    .titleText img:first-of-type{
        margin-left: 29%;
    }
    .titleText img{
        float: left;
        width: 2.67rem;
        height: 1.5rem;
    }
    .titleText span{
        float: left;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        color: #FF4C3D;
    }
    .coverDiv{
        width: 100%;
        padding-top: 0.1px;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: space-around;
    }
    .coverDiv .coverA{
        /*float: left;*/
        height: 96%;
        margin-top: 1%;
    }
    ul .coverDiv .coverA{
        width: 96%;
        height: 98%;
    }
    ul{
        padding: .7rem 0 .7rem .4rem;
    }
    ul:after{
        clear: both;
        content: '';
        display: block;
        height: 0;
    }
    ul li{
        float: left;
        width: 12.6rem;
        margin: 0 .4rem .4rem 0;
        padding: 0 0 .8rem 0;
        background: #fff;
    }
    ul li img{
        width: 96%;
        margin-left: 2%;
    }
    ul li h5{
        width: 11.63rem;
        height: 2.17rem;
        line-height: 2.17rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
        font-size: 12px;
        margin-left: 8px;
    }
    ul li p{
        width: 11.63rem;
        height: 1.58rem;
        line-height: 1.58rem;
        margin-left: 8px;
    }
    ul li p em{
        float:left;
        color: #FC5474;
        vertical-align: bottom;
        font-size: 14px;
        font-weight: bolder;
    }
    ul li p span{
        float: right;
        text-decoration: line-through;
    }
    ul li h4{
        width: 11.63rem;
        height: 2.07rem;
        color: #fff;
        font-size: 1rem;
        text-align: center;
        line-height: 2.07rem;
        background: #ff5b82;
        border-radius: 5px;
        margin-left: 8px;
    }
    .btm{
        width: 100%;
        height: 3.67rem;
        line-height: 3.67rem;
        text-align: center;
        color: #333;
    }
    .top{
        width: 2.6rem;
        height: 2.6rem;
        background: url(./images/toTop.png)0 0 / 100% no-repeat;
        border-radius: 50%;
        position: fixed;
        right: 2rem;
        bottom: 7rem;
        z-index: 10;
    }
</style>
